<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="css/art.css">
    <style src="@wangeditor/editor/dist/css/style.css"></style>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="lib/editormd/css/editormd.min.css">
    <link rel="stylesheet" href="lib/editormd/css/editormd.css" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    <script src="js/myhead.js"></script>
    <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
    <style>
        .btn{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <myhead @uo="getUserinfo" >
        <template #nologined>
            <a href="login.html">登录</a>
            <el-link type="primary">注册</el-link>
        </template>
        <template #logined="props">
        </template>
    </myhead>
    <div class="content">
        <div class="box">
            <div class="t">
                <div class="shou"><a href="index.html" style="background-color: green">网站首页</a></div>
                <div class="fa">发表blog</div>
            </div>
            <input type="text" placeholder="标题" class="title" v-model="article.title"><br>
            <div id="div1">

            </div>
            <span>分类</span>
            <el-select v-model="value" placeholder="请选择" @change="chan">
                <el-option
                        v-for="item in type"
                        :key="item.tid"
                        :value="item.tname"
                >
                </el-option>
            </el-select><br/>
            <div class="pic">
                <span class="pic_span">首图</span>
                <el-upload
                        :action='"other/common/upload?usid=" + id'
                        :on-success="handleSuccess"
                        :show-file-list="false"
                        :on-error="handleError">
                    <el-button style="margin-left: 100px;position:absolute; top:20px;left: 65px; border: none" slot="trigger" size="small" type="primary">选择文件</el-button>
                </el-upload><br>
                <img v-if="picUrl!=''"  :src="picUrl">
            </div>
            <el-checkbox-group v-model="checkList" style="margin-left: 100px">
                <el-checkbox label="私密"></el-checkbox>
                <el-checkbox label="赞赏"></el-checkbox>
                <el-checkbox label="评论"></el-checkbox>
            </el-checkbox-group>
            <div class="bt">
                <el-button type="primary" @click="empty">清空</el-button>
                <el-popconfirm
                        confirm-button-text='好的'
                        cancel-button-text='不用了'
                        icon="el-icon-info"
                        icon-color="red"
                        @confirm="Draft"
                        title="你要保存这些内容吗？"
                >
                    <el-button  type="primary" slot="reference" >存稿</el-button>
                </el-popconfirm>
                <el-button type="primary"  @click="upload">发表</el-button>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="er"></div>
        <div class="newBlog">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">最近博客</p>
            <p style="margin-top: 10px">用户故事(User Strory)</p>
            <p style="margin-top: 10px"> 关于刻意联系的清单</p>
            <p style="margin-top: 10px">失败要趁早</p>
        </div>
        <div class="lian">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">联系我们</p>
            <p style="margin-top: 10px">Email：2435939131@qq.com</p>
            <p style="margin-top: 10px">QQ：2435939131</p>
        </div>
        <div class="lie">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">Lirenmi</p>
            <p style="margin-top: 10px">这是我的个人博客、会分享关于编程、写作、思考相关的任何</p>
            <p style="margin-top: 10px">内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script type="text/javascript">
    let app=new Vue({
        el:"#app",
        data:{
            editor:null,
            article:{title:"",content:'',showcol:'',tid:'',pic:'',likes:0,view:0,status:0,usid:'',power:"",address:''},
            type:[],
            value:'',
            imageUrl: '',
            userinfo:'',
            picUrl:'',
            id:'',
            checkList: ['赞赏','评论']
        },
        methods:{

            getUserinfo(userinfo){
                this.userinfo=userinfo;
                console.log(this.userinfo);
                this.id=this.userinfo.usid;
            },

            handleSuccess(response){
               this.picUrl=(response.data);
               this.article.pic=response.data.replace("\\\\","\\");
            },
            handleError(){

            },
            //得到类别
            getAlltype(){
                axios.get("getAllType").then(res=>{
                    this.type=res.data;
                    console.log(this.type)
                })
            },
            chan(){
                for (let typeKey in this.type) {
                   if(this.type[typeKey].tname==this.value){
                       this.article.tid=Number(this.type[typeKey].tid)
                   }
                }
               console.log(this.article.tid)
            },
            //取消
            empty(){
                this.del();
            },
            Draft(){
                this.article.content=this.editor.txt.html();
                this.article.usid=this.userinfo.usid;
                this.article.showcol=(this.editor.txt.text().replace("nbsp;",""))
                axios.post("draftArticle",this.article).then(res=>{
                    console.log(res.data)
                    if(res.data.code==1){
                        alert(res.data.message);
                        this.del();
                    }else{
                        alert(res.data.message);
                    }
                })
            },
            //上传
            upload(){
                this.getPower();
              this.article.address= localStorage.getItem("location");
              this.article.content=this.editor.txt.html();
              this.article.usid=this.userinfo.usid;
                this.article.showcol=(this.editor.txt.text().replace("nbsp;",""))
                axios.post("article/addArticle",this.article).then(res=>{
                    if(res.data.code==-2){
                        this.$message.error(res.data.message);

                    }else if(res.data.code==-1){
                        alert(res.data.message);
                    }else if(res.data.code==1){
                        this.$message.success(res.data.message);
                    }
                    this.del();
                    this.creaFu();
                })
            },
            creaFu(){
                let E = window.wangEditor
                this.editor = new E('#div1')
                this.editor.config.height = 800
                this.editor.create();
            },
            del(){
                this.value="";
                this.article={title:"",content:'',tid:'',pic:'',likes:0,view:0,status:0,usid:''};
                this.editor.destroy();
                this.editor=null;
                this.picUrl='';
                this.checkList=['赞赏','评论'];
               // this.creaFu();
            },
            getPower(){
                let str=""
                if(this.checkList.length!=0){
                    for (let i = 0; i < this.checkList.length; i++) {
                        if(i==this.checkList.length-1){
                            str+=this.checkList[i];
                        }else{
                            str+=this.checkList[i]+";";
                        }
                    }
                    this.article.power=str;
                }
            }

        },
        created(){
            this.getAlltype();
        },
        mounted() {
                let E = window.wangEditor
                this.editor = new E('#div1')
                // 或者 const editor = new E( document.getElementById('div1') )
                this.editor.config.height = 800
                this.editor.create();

        },
    })
</script>
</body>
</html>